<template>
    <div class="tab">
        <div 
        class="tab_item"
        :class="{active: currentIndex === index}"
        v-for="item, index of list"
        :key="index"
        >
            <span @click="itenChange(index)">{{item}}</span>
        </div>
    </div>
</template>
<script>
export default {
    name: '',
    emits: ["itemClick"],   //子传父 最好先加上要传递的方法
    props: {
        list: {
            type: Array,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            currentIndex: 0
        }
    },
    methods: {
        itenChange(index) {
            this.currentIndex = index;
            this.$emit("itemClick", index);
        }
    },
}
</script>
<style>
.tab {
    display: flex;
}
.tab_item {
    flex: 1;
    text-align: center;
}
.active {
    color:pink;
}
.active span {
    border-bottom: 3px solid;
    padding-bottom: 5px;
}
</style>
